<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>iCSS -- intresting css</title>
    <!-- 一些有趣的CSS题目测试  https://github.com/chokcoco/iCSS -->

    <style>
        .wrapper{
            padding:20px;
            border: 1px dashed #000;
        }

        div#test1{
            position:relative;
            width:200px;
            height:60px;
            background:#ddd;
        }
       /* div#test1::before{
            content: "";
            width:5px;
            height:60px;
            position:absolute;
            left:0;
            top:0;
            background: deeppink;
        }*/

        /*div#test1{
            box-shadow:-5px 0 0 0 deeppink;
        }*/

        /*div#test1{
            box-shadow:inset 5px 0px 0 0 deeppink;
        }*/

        div#test1{
            width:205px;
            background:deeppink;
            overflow-y:scroll;
        }
        div#test1::-webkit-scrollbar{
            width: 200px;
            background-color:#ddd;
        }

        /*-------------------------------------*/
        /*div#test2{
            position:relative;
            background:#9c27b0;
            height:180px;
            width:180px;
            border:20px dashed #2196f3;
        }
        div#test2::after{
            content:"";
            position:absolute;
            height:180px;
            width:180px;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background:#fff;
        }*/

        div#test2{
            background:#fff;
            background-clip:padding-box;
            border:20px dashed #cccc99;
            height:180px;
            width:180px;
            position: relative;
        }
        div#test2::before{
            content:"";
            position:absolute;
            top:-20px;
            left:-20px;
            bottom:-20px;
            right:-20px;
            background:#996699;
            z-index:-1;
        }

    </style>
</head>
<body>
<!-- test1 下面这个图形，只使用一个标签，可以有多少种实现方式 -->
<div class="wrapper">
    <div id="test1"></div>
</div>

<div class="wrapper">
    <div id="test2"></div>
</div>

<div class="wrapper">
    <div style="position:relative; z-index:auto">
        <img src="mm1.jpg" style="position:absolute; z-index:2;">
    </div>
    <div style="position:relative; z-index:auto">
        <img src="mm2.jpg" style="position:relative; z-index:1;">
    </div>
</div>

</body>
</html>